div{
    margin: 10px;
    padding: 5px;
}
#father{
    border: 1px #000 solid;
    height: 900px;
}
.layer01{
    border: 1px #00F dashed;
    display: inline-block;
    float: left;
}
.layer02{
    border: 1px #00F dashed;
    display: inline-block;
    float: left;
    clear: left;
}
.layer03{
    border: 1px #00F dashed;
    display: inline-block;
    float: right;
}
.layer04{
    border: 1px #00F dashed;
    display: inline-block;
    float: right;
}
/*
clear: 块级元素，而浮动是行级元素。
clear: left; 不允许在左侧有浮动元素
clear: right; 不允许右侧有浮动元素
clear: both; 两侧允许有浮动元素
clear: none; 允许有浮动元素
*/
.layer05{
    border: 1px #00F dashed;
    display: inline-block;
    float: left;
    clear: left;
}
img{
    width: 200px;
    height: 200px;
}